﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实践活动报名</title>
	<meta name="viewport" content="width=device-width, initial-scale=1  maximum-scale=1 user-scalable=no">
	<meta name="mobile-web-app-capable" content="实践活动报名">
	<meta name="apple-mobile-web-app-capable" content="实践活动报名">
	<meta name="apple-touch-fullscreen" content="实践活动报名">
	<meta name="HandheldFriendly" content="实践活动报名">

	<link rel="stylesheet" href="${request.contextPath}/statics/css/materialize.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/normalize.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/owl.carousel.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/owl.theme.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/owl.transitions.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/fakeLoader.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/style.css">
	<style>
		.form-field{
			color: #000000;
			font-size: 16px;
			line-height: 32px;
			display: flex;
		}
		.add {
			display: inline-block;
			width: 76px;
			height: 76px;
			color: #ccc;
			border: 0.5px dashed #C9CACA;
			border-radius: 10px;
			text-indent: -12em;
			transition: color .25s;
			position: relative;
			overflow: hidden;
		}
		.add:hover {
			color: #34538b;
		}
		.add::before, .add::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
		}
		.add::before {
			width: 20px;
			border-top: 4px solid;
			margin: -1px 0 0 -10px;
		}
		.add::after {
			height: 20px;
			border-left: 4px solid;
			margin: -10px 0 0 -2px;
		}
		input{
			border: 0.5px solid #C9CACA !important;
		}
		.redStar{
			color: red;
			font-size: 16px;
			line-height: 32px;
			display: flex;
			justify-content: center;
			align-items: flex-end;
		}
		input::placeholder {
			color: #C9CACA
		}
		.tijiao{
			position: fixed;
			bottom: 0;
			color: #333;
			width: 90%;
		}
	</style>
</head>
<body>
	<!-- contact us -->
	<div class="pages section" style="margin-top: 0;padding-top:  25px">
		<div class="container">
			<div class="contact-us">
				<div class="row">
					<div class="col s12">

							<div class="form-group">
								<label class="form-field">学生姓名<label class="redStar">*</label> </label>
							</div>
							<div class="form-group">
								<input type="text" id="userName" name="userName" placeholder="请输入姓名" required>
							</div>
							<div class="form-group">
								<label class="form-field">学生身份证号<label class="redStar">*</label> </label>
							</div>
							<div class="form-group">
								<input type="email" id="idCard" name="idCard" placeholder="请输入身份证号" required>
							</div>
							<div class="form-group" >
								<label class="form-field" style="display: inline-flex;">学生性别<label class="redStar">*</label> </label>
								<span style="margin-left: 40%">
									<input type="radio" class="with-gap" id="guest-checkout" name="sex" value="1">
									<label for="guest-checkout"><span>男</span></label>
								</span>
								<span style="margin-left: 30px;">
									<input type="radio" class="with-gap" id="register" name="sex" value="0">
									<label for="register"><span>女</span></label>
								</span>
							</div>
							<div class="form-group" id="subject-field">

							</div>
							<div class="form-group">
								<label class="form-field">学生一寸证件照<label class="redStar">*</label> </label>
							</div>
							<div class="form-group" >
								<div >
									<span class="add" title="继续上传" onclick="this.nextElementSibling.click()"></span>
									<input type="file" name="file" id="inputFile" onchange="changeFile()" style="display: none" accept="image/*">
									<input id="header" type="hidden">
									<img id="uploadImg" src="" style="width: 76px;height: 76px;border-radius: 10px; visibility: hidden"/>
								</div>
							</div>
							<div class="form-group">
								<label class="form-field">监护人姓名<label class="redStar">*</label> </label>
							</div>
							<div class="form-group" >
								<input type="text" class="" id="guardian" name="guardian" placeholder="请输入监护人姓名" required>
							</div>
							<div class="form-group">
								<label class="form-field">监护人联系方式<label class="redStar">*</label> </label>
							</div>
							<div class="form-group" >
								<input type="text" class="" id="phone" name="phone" placeholder="请输入监护人联系方式" required>
							</div>
							<div class="form-group">
								<label class="form-field">与学生关系<label class="redStar">*</label> </label>
							</div>
							<div class="form-group" >
								<input type="text" class="" id="relations" name="relations" placeholder="请输入与学生关系 (例如：母亲父亲爷爷奶奶)" required>
							</div>

					</div>
				</div>
			</div>
			<div class="tijiao">
				<button class="btn button-default" type="button" onclick="signup()">立即报名</button>
			</div>
		</div>
	</div>
	<!-- end contact us -->
	
<!-- loader -->
	<div id="fakeLoader"></div>
	<!-- end loader -->

	
	<!-- scripts -->
	<script src="${request.contextPath}/statics/js/jquery.min.js"></script>
	<script src="${request.contextPath}/statics/js/materialize.min.js"></script>
	<script src="${request.contextPath}/statics/js/owl.carousel.min.js"></script>
	<script src="${request.contextPath}/statics/js/fakeLoader.min.js"></script>
	<script src="${request.contextPath}/statics/js/contact-form.js"></script>
	<script src="${request.contextPath}/statics/js/main.js"></script>

	<script>
		function signup(){
			var userName = $("#userName").val();
			if(!userName){
				alert("请输入学生姓名");
				return;
			}
			var idCard = $("#idCard").val();
			// 正则校验身份证号
			var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
			if(!reg.test(idCard)){
				alert("请输入正确的身份证号");
				return;
			}
			var sex = $('input[name="sex"]:checked').val();
			if(!sex){
				alert("请选择学生性别");
				return;
			}
			var guardian = $("#guardian").val();
			if(!guardian){
				alert("请输入监护人姓名");
				return;
			}
			var phone = $("#phone").val();
			// 正则校验手机号
			var reg = /^1[3456789]\d{9}$/;
			if(!reg.test(phone)){
				alert("请输入正确的手机号");
				return;
			}
			var relations = $("#relations").val();
			if(!relations){
				alert("请输入与学生关系");
				return;
			}

			$.ajax({
				type: 'GET',
				url: '${request.contextPath}/h5/subSignup',
				data: {
					userName: userName,
					idCard: idCard,
					sex: sex,
					guardian: guardian,
					phone: phone,
					header: $("#header").val(),
					relations: relations,
					categoryId: 1
				},
				success: function (res) {
					if(res.code === 0){
						alert("报名成功");
						window.location.href="${request.contextPath}/h5/signup";
					}else{
						alert(res.msg);
					}
				}
			});
		}

		function changeFile() {
			let fileDom = document.getElementById('inputFile');
			let imgDom = document.getElementById('uploadImg'); // 页面的img对象
			let reader = new FileReader(); // 读取计算机文件对象，详见下边扩展
			reader.readAsDataURL(fileDom.files[0]);
			reader.onload = (e) => {
				let img = new Image(); // 创建图片对象实例
				img.src = e.target.result; // 设置图片的src为上传的图片
				img.onload = () => {
					console.log(img.width); // 750 ，得到上传图片的实际宽度为750px
					console.log(img.height); // 1280 ，得到上传图片的实际高度为1280px
				}
				imgDom.src = e.target.result; // 给img标签赋值，图片就能显示啦！

				let form = new FormData();
				form.append('file', $('#inputFile').get(0).files[0]);
				$.ajax({
					url: "/h5/upload",
					type: "POST",
					data: form,
					processData: false, // 必须false才会避开jQuery对 formdata 的默认处理
					contentType: false, // 必须false才会自动加上正确的Content-Type
					xhr: function(){
						myXhr = $.ajaxSettings.xhr();
						if(myXhr.upload){
							myXhr.upload.addEventListener('progress',function(e) {
								//progressBar.style.width = e.loaded / e.total * 100 + '%';
							}, false);
						}
						return myXhr;
					},
					success: function(res){
						// 请求成功
						console.log(res);
						$("#header").val(res.data.location);
						document.getElementById("uploadImg").style.visibility="visible";
					},
					error: function(res) {
						// 请求失败
						console.log(res);
					}
				});
			}
		}



	</script>

</body>
</html>
